<template>
    <div class="home-banner">
        <van-swipe 
        class="home-banner-content"
          :autoplay="3000"
          :duration="1000"
          indicator-color="red">
          <van-swipe-item
          v-for='item in bannerList'
          :key="item.bannerid"
          >
          <van-image :src='item.img'></van-image>
          </van-swipe-item>

        </van-swipe>
      </div>

</template>
<script setup lang='ts'>
     //导入对应的api请求
      import {bannerListApi} from '@/api/banner'
      //导入类型限制
      import type {MyBannerItem} from '@/config/interface'
      import {ref,onMounted } from 'vue'
      //提前准备一个数组，请求回来后进行替换
      //用该数组渲染页面（因为涉及到替换，索引使用ref来定义）
      const bannerList = ref<MyBannerItem[]>([])

      //挂载完毕的钩子
      onMounted( async()=>{
        const res = await bannerListApi()
        
        bannerList.value = res.data
      })
</script>
<style scoped lang="scss">
    @import '@/styles/vaniable.scss';
    .home-banner{
      height: 180px;
      position: relative;
      box-sizing: border-box;
      padding: 15px;
        &::after{
          content: "";
          position: absolute;
          left: 0;  
          top: -50px;
          height:100%;
          width: 100%;
          background-color: $globalColor;
          border-radius: 0 0 150px 150px / 0 0 40px 40px;
          z-index: -1;
        }
        > .home-banner-content{
          width: 100%;
          height: 100%;
          background: orange;
          border-radius: 10px;
          overflow: hidden;
      }
      }
</style>